<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="../include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>商户结算</title>

<link rel="stylesheet" type="text/css" href="${ctx}/resources/media/css/select2_metro.css" />
<link rel="stylesheet" href="${ctx}/resources/media/css/DT_bootstrap.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/resources/media/css/datepicker.css" />
<style>

#s2id_statementStatus{vertical-align:top}
#s2id_statementStatus .select2-display-none{display:none;}
</style>

<%@ include file="../include/treetable.jsp" %>	
	
</head>
<body>
	<div class="row-fluid profile">
		<div class="span12">
			<!--BEGIN TABS-->
			<div class="tabbable tabbable-custom tabbable-full-width">
				<ul class="nav nav-tabs">
					<li class="active"><a href="${ctx}/merchant">商户结算</a></li>		
				</ul>
				<div class="tab-content">
                    <div class="alert alert-block alert-warning fade in hide">
                        <button type="button" class="close" data-dismiss="alert"></button>
                        <h4 class="alert-heading">请注意!</h4>
                        <p>
                            你正在执行一个删除操作，你将删除被标记为"<strong style="color:red" class="title">站点标题</strong>"的数据。
                            <br/>请确保你知晓执行该操作的后果，该操作不可恢复！
                        </p>
                        <p>
                            <a class="btn red cconfirm" href="javascript:;">继续删除</a> <a class="btn blue cclose" href="javascript:;">放弃操作</a>
                        </p>

                    </div>
					<div class="tab-pane row-fluid active" id="tab_1_1">
						<div class=" responsive" data-tablet="span12 fix-offset">
							<!-- BEGIN EXAMPLE TABLE PORTLET-->
							<div class="portlet box grey">
								<div class="portlet-title">
									<div class="caption">
										<i class="icon-list"></i>结算列表
									</div>
								</div>
								<div class="portlet-body">
                                    <div class="row-fluid">
                                        <div class="span12 ">     
                                                                        
                                            <input type="text" placeholder="商户编号" id="merchantId" class="m-wrap normal">
                                            <select id="statementStatus" style="width:150px">
                                            	<option value="-1">全部</option>
                                            	<option value="0">已结算</option>
                                            	<option value="1">未结算</option>
                                            </select>
                                    
                                            <button class="btn blue" onclick="search()" style="vertical-align:top"><i class="icon-search"></i> 搜索</button>
                                            <button class="btn " onclick="settlement(0)" style="margin-left:65%"><i class="icon-pencil"></i> 批量结算</button>
                                            
                                        </div>
                           
                                    </div>
									<table class="table table-striped table-bordered table-hover " 
										id="dataTable">
										<thead>
											<tr >
												<th>选择</th>
												<th>商户编号</th>
                                                <th>商户名称</th>												
												<th>订单编号</th>
												<th>原始订单号</th>
												<th>交易日期</th>
												<th>结算金额</th>
												<th>订单描述</th>
												<th>结算状态</th>
												<th style="width:120px">操作</th>
											</tr>
										</thead>
										<tbody>

										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
					<!--end tab-pane-->
				</div>
			</div>
			<!--END TABS-->
			
						<!-- 弹出框窗体 -->
				<div class="theme-popover" style="width:460px; margin:-113px 0 0 -230px;height:226px">
				<div class="theme-poptit">
					<a href="javascript:;" title="关闭" class="close"></a>
					<h3>商户结算</h3>
					<input id="orderIds" type="hidden" />	
				</div>
				<div class="theme-popbod dform">
					           <form class="theme-signin" name="loginform" >
					                <ol>
					                     <li><strong>结算总金额</strong>
                                           <input type="text" id="amount"  class="m-wrap input-xlarge" readonly="readonly">

										</li>
										 
					                     <li>
					                     <input class="btn btn-primary" type="button" name="submit" value=" 结算 " onclick="dialogSubmit()" style="float:right;margin-right:60px;padding-bottom:28px"/>
					                     <span id="msg" style="color: red"></span>
					                     </li>
					                </ol>
					           </form>
				 </div>
			</div>
			
		</div>
	</div>
	 <script type="text/javascript" src="${ctx}/resources/media/js/bootstrap-datepicker.js"></script>
	<script type="text/javascript" src="${ctx}/resources/media/js/jquery.validate.min.js"></script>
	<script type="text/javascript"  src="${ctx}/resources/media/js/select2.min.js"></script>
	<script type="text/javascript" src="${ctx}/resources/media/js/jquery.dataTables.js"></script>
	<script type="text/javascript" src="${ctx}/resources/media/js/DT_bootstrap.js"></script>
	<script type="text/javascript" src="${ctx}/resources/plugins/hashmap.js"></script>
   
    
	<script type="text/javascript">

        var dt;

		$(function() {
			
			
			
			$("select").select2();
			
            dt = $('#dataTable')
					.dataTable(
							{
								"bLengthChange" : false,
								"bFilter" : true,
								"bInfo" : false,
								"iDisplayLength" : 10,
								"bSort" : false,
								"sDom" : "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
								"sPaginationType" : "bootstrap",
                                "bServerSide":true,
                                "sAjaxSource":"${ctx}/merchant/settlementData.json",
								"oLanguage" : {
									"oPaginate" : {
										"sPrevious" : "上一页",
										"sNext" : "下一页"
									}
								},
                                "aoColumns":[
                                     {
                                    	"mData":null,
 	                                    "fnRender":function(oObj){ 
 	                                    	
	                                    	var content = '<input type=\"checkbox\" name="chkItem" value=\"'+oObj.aData.id+'\" id=\"'+oObj.aData.id+'\" onClick="onCheckBoxChange(this)" />';
	                                    	if(oObj.aData.statementStatus == 1){
	                                    		 return content;                              		 
	                                    	}                                  	
	                                    	 return null;
 	                                    }
                                    },{
                                        "mData":"merchantId"
                                    },{
                                        "mData":"merchantName"
                                    },{
                                    	"mData":"orderId"
                                      
                                    },{
                                        "mData":"extOrderId"
                                    },{
                                        "mData":"procDate"
                                    },{
                                        	"mData":null,
    	                                	"fnRender":function(oObj){
    	                           
    	                                		return oObj.aData.amount+'<input type="hidden" value="'+oObj.aData.amount+'" id="amt_'+oObj.aData.id+'" />';
    	                                	}
                                   
                                    },{
                                        "mData":"description"
                                    },{
                                    	 "mData":null,
                                         "fnRender":function(oObj){
                                         	 var text = "";
                                              if(oObj.aData.statementStatus == 0){
                                                  text = "<span class='label label-success'>已结算</span>";
                                              } else if(oObj.aData.statementStatus == 1){
                                           	   text = "<span class='label label-important'>待结算</span>";
                                              }
                                              return text;
                                         }
                                    },{
                                        "mData":null,
                                        "fnRender":function(oObj){
                                            
                                        	if(oObj.aData.statementStatus == 0)
                                        		return null;
                                        	
                                  			 return '<a href="javascript:;" class="btn mini black" onClick="settlement('+oObj.aData.amount+')">\
                                             <i class="icon-pencil"></i> 立即结算\
                                     		</a>\
                                          ';
                           					
                                        }
                                    }

                                ],
                                "fnServerData":function(sSource,aoData,fnCallback){
                                    for(i in aoData){
                                        if(aoData[i].name == "sSearch")
                                            aoData[i].name = "merchantId";
                                    }
                               
                                    aoData.push({name:'statementStatus',value:$("#statementStatus").val()}); 
                                   
                                    $.ajax({
                                        "dataType":'json',
                                        "type":'POST',
                                        "url":sSource,
                                        "data":aoData,
                                        "success":fnCallback
                                    });
                                }
							});

			jQuery('#dataTable_wrapper .row-fluid:first').remove();
			jQuery('#dataTable_wrapper .dataTables_length select').addClass(
					"m-wrap small"); // modify table per page dropdown
		});

        function search(){
            dt.fnFilter($("#merchantId").val());
        }

      
    	function settlement(amount) {

    		orderIds = $("#orderIds").val();
    		if(orderIds =='' || orderIds == null){
    			alertBasic("警告信息","请选择要结算的数据",null,1);
    			return;
    		}
    		
			$('.theme-popover-mask').fadeIn(100);
			$('.theme-popover').slideDown(200);			
			$('.theme-poptit .close').click(function() {
				$('.theme-popover-mask').fadeOut(100);
				$('.theme-popover').slideUp(200);
			}); 
		    if(amount != 0)
				$("#amount").val(amount);
	}

    	function dialogSubmit() {
    
    		var amount = $("#amount").val();
    		var orderIds =$("#orderIds").val();
    		$.post("${ctx}/merchant/orderSettlement/", {
    			orderIds : orderIds,
    			amount : amount
    		}, function(result) {
    			if (result.success) {
    				alertBasic("提示信息",result.message,function(){
    					location.href = "${ctx}/merchant/settlement";	
    				},3);
    			} else {
    				alertBasic("提示信息",result.message,null,3);
    				return false;
    			}
    		}, "json")
        	
    	 }
    	 
    		var orderIds = '';
	  	  	var items = new HashMap();  	  
	          function onCheckBoxChange(cbx){
	        	var amt = Number($("#amount").val());
	        	
	          	if($(cbx).attr("checked")){
	          		items.set($(cbx).attr("id"),$("#amt_" + $(cbx).val()).val());    
	          		amt +=  Number($("#amt_" + $(cbx).val()).val());          		
	        	}else{
	        			items.remove($(cbx).attr("id"));
	        			amt -= Number($("#amt_" + $(cbx).val()).val());
	        	}        	
	        	orderIds = '';          	
	          	items.forEach(function(key,value){          		
	          		orderIds += value+',';

	          	});
	          	  $("#orderIds").val(orderIds);
	              $("#amount").val(amt);
	                
	          }

	</script>
</body>
</html>